<template>
  <div class="team-detail-container">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="title-container">
        <div class="breadcrumb-title">
          <span class="main-title">队伍管理</span>
          <span class="divider">/</span>
          <span class="sub-title">查看队伍</span>
        </div>
      </div>
      <div class="button-container">
        <el-button type="primary" class="back-btn" @click="handleBack">
          <el-icon><ArrowLeft /></el-icon>返回
        </el-button>
      </div>
    </div>

    <!-- 团队信息卡片 -->
    <div class="team-card">
      <!-- 学校信息头部 -->
      <div class="school-header">
        <div class="school-info">
          <div class="school-badge">
            <img
                src="D:\IdeaProjects\second\shixun\vue-school\src\assets\960a304e251f95cad1c8ab3e5a4d683e6709c83df4bb.webp"
                alt="校徽"
                class="badge-img"
            />
          </div>
          <div class="school-name-container">
            <h2 class="school-name">广元第一中学</h2>
            <div class="school-meta">
              <span class="batch-info">
                <el-icon><Calendar /></el-icon>
                母校行活动秋季批次
              </span>
              <span class="team-info">
                <el-icon><User /></el-icon>
                队伍名称：广元一队
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 成员表格 -->
      <el-card class="member-card" shadow="hover">
        <div slot="header" class="card-header">
          <div class="header-title">
            <el-icon><User /></el-icon>
            <span>队伍信息</span>
          </div>
          <div class="member-count">共 {{ teamMembers.length }} 人</div>
        </div>
        <el-table
            :data="teamMembers"
            border
            style="width: 100%"
            :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
        >
          <el-table-column prop="index" label="序号" width="80" align="center" />
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="position" label="担任职务" width="100" />
          <el-table-column prop="studentId" label="学号" width="120" />
          <el-table-column prop="gender" label="性别" width="80" align="center" />
          <el-table-column prop="college" label="学院" width="150" />
          <el-table-column prop="major" label="专业" width="150" />
          <el-table-column prop="class" label="班级" width="100" />
          <el-table-column prop="phone" label="联系电话" width="120" />
          <el-table-column prop="joinTime" label="加入时间" width="180" />
        </el-table>
      </el-card>

      <!-- 活动照片 -->
      <el-card class="photo-card" shadow="hover">
        <div slot="header" class="card-header">
          <div class="header-title">
            <el-icon><Picture /></el-icon>
            <span>活动照片</span>
          </div>
          <div class="upload-info">
            <span class="upload-count">可继续上传{{ 5 - uploadedPhotos.length }}张 (管理免审)</span>
            <el-button type="primary" size="small" @click="openPhotoDialog" class="upload-btn">
              <el-icon><Upload /></el-icon>上传照片
            </el-button>
          </div>
        </div>
        <div v-if="uploadedPhotos.length > 0" class="photo-grid">
          <div v-for="(photo, index) in uploadedPhotos" :key="index" class="photo-item">
            <div class="photo-wrapper">
              <el-image
                  :src="photo.url"
                  :preview-src-list="previewPhotoList"
                  fit="cover"
                  class="photo-img"
                  :initial-index="index"
              >
                <template #error>
                  <div class="image-error">
                    <el-icon><Picture /></el-icon>
                    <span>图片加载失败</span>
                  </div>
                </template>
              </el-image>
              <div class="photo-overlay">
                <el-button
                    type="danger"
                    size="small"
                    circle
                    :icon="Delete"
                    @click.stop="confirmDeletePhoto(index)"
                    class="delete-btn"
                />
              </div>
            </div>
            <div class="photo-name">{{ photo.name }}</div>
          </div>
        </div>
        <div v-else class="empty-photos">
          <el-empty description="暂无活动照片" :image-size="100">
            <el-button type="primary" @click="openPhotoDialog">上传照片</el-button>
          </el-empty>
        </div>
      </el-card>

      <!-- 活动附件 -->
      <el-card class="attachment-card" shadow="hover">
        <div slot="header" class="card-header">
          <div class="header-title">
            <el-icon><Folder /></el-icon>
            <span>活动附件</span>
          </div>
          <div class="upload-info">
            <span class="upload-count">可继续上传{{ 5 - uploadedFiles.length }}个 (管理免审)</span>
            <el-button type="primary" size="small" @click="openFileDialog" class="upload-btn">
              <el-icon><Upload /></el-icon>上传附件
            </el-button>
          </div>
        </div>
        <el-table
            :data="uploadedFiles"
            border
            style="width: 100%"
            :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
            v-if="uploadedFiles.length > 0"
        >
          <el-table-column prop="name" label="文件名称" width="300">
            <template #default="{ row }">
              <el-link type="primary" @click="downloadFile(row)">
                <el-icon><Document /></el-icon>
                {{ row.name }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="大小" width="100" />
          <el-table-column prop="time" label="上传时间" width="180" />
          <el-table-column label="操作" width="120" align="center">
            <template #default="{ $index }">
              <el-button
                  type="danger"
                  size="small"
                  :icon="Delete"
                  @click="confirmDeleteFile($index)"
              />
            </template>
          </el-table-column>
        </el-table>
        <div v-else class="empty-files">
          <el-empty description="暂无活动附件" :image-size="100">
            <el-button type="primary" @click="openFileDialog">上传附件</el-button>
          </el-empty>
        </div>
      </el-card>
    </div>

    <!-- 照片上传弹窗 -->
    <el-dialog
        title="上传活动照片"
        v-model="photoDialogVisible"
        width="700px"
        :close-on-click-modal="false"
        class="upload-dialog"
    >
      <div class="upload-dialog-content">
        <div class="upload-tips">
          <div class="tip-item">
            <el-icon><CircleCheck /></el-icon>
            <span>管理上传无需审核</span>
          </div>
          <div class="tip-item">
            <el-icon><InfoFilled /></el-icon>
            <span>活动总结最多上传10张照片</span>
          </div>
          <div class="tip-item">
            <el-icon><WarningFilled /></el-icon>
            <span>可继续上传{{ 5 - uploadedPhotos.length }}张照片（管理免审）</span>
          </div>
          <div class="tip-item">
            <el-icon><WarningFilled /></el-icon>
            <span>请上传横拍照片，大小不超过10M，仅支持PNG、JPG格式</span>
          </div>
        </div>
        <el-upload
            class="photo-uploader"
            action="/api/upload/photo"
            list-type="picture-card"
            :file-list="photoFileList"
            :on-success="handlePhotoSuccess"
            :on-remove="handlePhotoRemove"
            :before-upload="beforePhotoUpload"
            :limit="5 - uploadedPhotos.length"
            multiple
        >
          <el-icon><Plus /></el-icon>
          <div class="upload-text">点击上传</div>
        </el-upload>
      </div>
      <template #footer>
        <el-button @click="photoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPhotos">确认上传</el-button>
      </template>
    </el-dialog>

    <!-- 文件上传弹窗 -->
    <el-dialog
        title="上传活动附件"
        v-model="fileDialogVisible"
        width="600px"
        :close-on-click-modal="false"
        class="upload-dialog"
    >
      <div class="upload-dialog-content">
        <div class="upload-tips">
          <div class="tip-item">
            <el-icon><CircleCheck /></el-icon>
            <span>管理上传无需审核</span>
          </div>
          <div class="tip-item">
            <el-icon><InfoFilled /></el-icon>
            <span>活动总结最多上传10个附件</span>
          </div>
          <div class="tip-item">
            <el-icon><WarningFilled /></el-icon>
            <span>请上传文件，大小不超过50M，多文件请打包上传</span>
          </div>
        </div>
        <el-upload
            class="file-uploader"
            action="/api/upload/file"
            :file-list="fileFileList"
            :on-success="handleFileSuccess"
            :on-remove="handleFileRemove"
            :before-upload="beforeFileUpload"
            :limit="5 - uploadedFiles.length"
            multiple
            drag
        >
          <el-icon class="el-icon--upload"><Upload /></el-icon>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">支持多种格式，单个文件不超过50M</div>
          </template>
        </el-upload>
      </div>
      <template #footer>
        <el-button @click="fileDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitFiles">确认上传</el-button>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
        v-model="deleteConfirmVisible"
        title="确认删除"
        width="400px"
        class="confirm-dialog"
    >
      <div class="confirm-content">
        <el-icon class="warning-icon"><Warning /></el-icon>
        <span>确定要删除这个{{ deleteType === 'photo' ? '照片' : '文件' }}吗？</span>
      </div>
      <template #footer>
        <el-button @click="deleteConfirmVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定删除</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  ArrowLeft,
  Upload,
  Delete,
  Plus,
  Picture,
  Calendar,
  User,
  Document,
  Folder,
  CircleCheck,
  InfoFilled,
  WarningFilled,
  Warning
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

// 返回按钮
const handleBack = () => {
  router.push('/manage/teammanage')
}

// 团队成员数据
const teamMembers = ref([
  {
    index: 1,
    name: '张三',
    position: '队长',
    studentId: '10001',
    gender: '男',
    college: '计算机学院',
    major: '软件工程',
    class: '1班',
    phone: '1588411878',
    joinTime: '2023/10/27 00:00:00'
  },
  {
    index: 2,
    name: '夏雨',
    position: '队员',
    studentId: '10002',
    gender: '女',
    college: '文学院',
    major: '汉语言专业',
    class: '2班级',
    phone: '1588411878',
    joinTime: '2023/10/27 00:00:00'
  }
])

// 照片相关
const uploadedPhotos = ref([
  { url: 'https://jsj.scujj.edu.cn/sys/FCKFileUpload/14B3A5902D1100F79169223569C8E857.png', name: '活动照片1.jpg' },
  { url: 'https://jsj.scujj.edu.cn/sys/FCKFileUpload/48E0D4004CCFBE575CE4725F73C64E74.png', name: '活动照片2.jpg' }
])

const previewPhotoList = computed(() => {
  return uploadedPhotos.value.map(photo => photo.url)
})

// 附件相关
const uploadedFiles = ref([
  {
    name: '活动记录.docx',
    size: '2.3MB',
    time: '2023-10-27 00:00:00',
    url: '/files/record.docx'
  },
  {
    name: '回执单.pdf',
    size: '1.5MB',
    time: '2023-10-27 00:00:00',
    url: '/files/receipt.pdf'
  }
])

// 上传弹窗控制
const photoDialogVisible = ref(false)
const fileDialogVisible = ref(false)

// 上传文件列表
const photoFileList = ref<any[]>([])
const fileFileList = ref<any[]>([])

// 删除确认相关
const deleteConfirmVisible = ref(false)
const deleteType = ref<'photo' | 'file'>('photo')
const deleteIndex = ref(-1)

// 打开照片上传对话框
const openPhotoDialog = () => {
  photoFileList.value = []
  photoDialogVisible.value = true
}

// 照片上传处理
const handlePhotoSuccess = (response: any, file: any) => {
  photoFileList.value.push(file)
}

const handlePhotoRemove = (file: any, fileList: any[]) => {
  photoFileList.value = fileList
}

const beforePhotoUpload = (file: any) => {
  const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isImage) {
    ElMessage.error('仅支持PNG、JPG格式的图片')
    return false
  }
  if (!isLt10M) {
    ElMessage.error('图片大小不能超过10M')
    return false
  }
  return true
}

const submitPhotos = () => {
  if (photoFileList.value.length === 0) {
    ElMessage.warning('请先选择要上传的照片')
    return
  }

  // 模拟上传成功
  photoFileList.value.forEach(file => {
    uploadedPhotos.value.push({
      url: URL.createObjectURL(file.raw),
      name: file.name
    })
  })

  ElMessage.success('照片上传成功')
  photoDialogVisible.value = false
}

// 打开文件上传对话框
const openFileDialog = () => {
  fileFileList.value = []
  fileDialogVisible.value = true
}

// 文件上传处理
const handleFileSuccess = (response: any, file: any) => {
  fileFileList.value.push(file)
}

const handleFileRemove = (file: any, fileList: any[]) => {
  fileFileList.value = fileList
}

const beforeFileUpload = (file: any) => {
  const isLt50M = file.size / 1024 / 1024 < 50
  if (!isLt50M) {
    ElMessage.error('文件大小不能超过50M')
    return false
  }
  return true
}

const submitFiles = () => {
  if (fileFileList.value.length === 0) {
    ElMessage.warning('请先选择要上传的文件')
    return
  }

  // 模拟上传成功
  fileFileList.value.forEach(file => {
    uploadedFiles.value.push({
      name: file.name,
      size: formatFileSize(file.size),
      time: new Date().toLocaleString(),
      url: URL.createObjectURL(file.raw)
    })
  })

  ElMessage.success('文件上传成功')
  fileDialogVisible.value = false
}

// 删除确认
const confirmDeletePhoto = (index: number) => {
  deleteType.value = 'photo'
  deleteIndex.value = index
  deleteConfirmVisible.value = true
}

const confirmDeleteFile = (index: number) => {
  deleteType.value = 'file'
  deleteIndex.value = index
  deleteConfirmVisible.value = true
}

const confirmDelete = () => {
  if (deleteType.value === 'photo') {
    uploadedPhotos.value.splice(deleteIndex.value, 1)
    ElMessage.success('照片删除成功')
  } else {
    uploadedFiles.value.splice(deleteIndex.value, 1)
    ElMessage.success('文件删除成功')
  }
  deleteConfirmVisible.value = false
}

// 下载文件
const downloadFile = (file: any) => {
  ElMessage.success(`开始下载 ${file.name}`)
  // 实际项目中这里应该有下载逻辑
}

// 辅助函数
const formatFileSize = (bytes: number) => {
  if (bytes < 1024) return bytes + 'B'
  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + 'KB'
  return (bytes / 1048576).toFixed(1) + 'MB'
}
</script>

<style scoped lang="scss">
.team-detail-container {
  padding: 20px;
  height: 100%;
  background-color: #f5f7fa;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .title-container {
    .breadcrumb-title {
      display: flex;
      align-items: center;
      gap: 8px;

      .main-title {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }

      .divider {
        color: #c0c4cc;
        font-size: 14px;
      }

      .sub-title {
        font-size: 16px;
        color: #606266;
      }
    }
  }

  .back-btn {
    padding: 8px 15px;
    border-radius: 6px;
    transition: all 0.3s;

    &:hover {
      background-color: #ecf5ff;
      color: #409EFF;
    }

    .el-icon {
      margin-right: 5px;
    }
  }
}

.team-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.school-header {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .school-info {
    display: flex;
    align-items: center;
    gap: 20px;

    .school-badge {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #f5f7fa;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 2px solid #ebeef5;

      .badge-img {
        width: 70%;
        height: 70%;
        object-fit: contain;
      }
    }

    .school-name-container {
      display: flex;
      flex-direction: column;
      gap: 8px;

      .school-name {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: #303133;
      }

      .school-meta {
        display: flex;
        gap: 20px;
        font-size: 14px;
        color: #606266;

        .batch-info,
        .team-info {
          display: flex;
          align-items: center;
          gap: 5px;

          .el-icon {
            color: #409EFF;
          }
        }
      }
    }
  }
}

.member-card,
.photo-card,
.attachment-card {
  border-radius: 8px;
  border: none;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #ebeef5;

    .header-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      color: #303133;

      .el-icon {
        color: #409EFF;
      }
    }

    .member-count {
      font-size: 14px;
      color: #909399;
    }

    .upload-info {
      display: flex;
      align-items: center;
      gap: 15px;

      .upload-count {
        font-size: 14px;
        color: #909399;
      }

      .upload-btn {
        padding: 7px 15px;
        border-radius: 6px;

        .el-icon {
          margin-right: 5px;
        }
      }
    }
  }

  :deep(.el-card__body) {
    padding: 20px;
  }
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;

  .photo-item {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .photo-wrapper {
      position: relative;
      width: 100%;
      height: 160px;
      border-radius: 6px;
      overflow: hidden;
      background-color: #f5f7fa;

      .photo-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;

        &:hover {
          transform: scale(1.05);
        }
      }

      .photo-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        opacity: 0;
        transition: opacity 0.3s;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 10px;

        .delete-btn {
          opacity: 0.8;
          transition: all 0.3s;

          &:hover {
            opacity: 1;
            transform: scale(1.1);
          }
        }
      }

      &:hover .photo-overlay {
        opacity: 1;
      }
    }

    .photo-name {
      margin-top: 8px;
      font-size: 13px;
      color: #606266;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.empty-photos,
.empty-files {
  padding: 40px 0;

  :deep(.el-empty__description) {
    margin-top: 10px;
    color: #909399;
  }
}

.upload-dialog {
  border-radius: 8px;

  :deep(.el-dialog__header) {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
    margin-right: 0;

    .el-dialog__title {
      font-weight: 600;
      color: #303133;
    }
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }

  :deep(.el-dialog__footer) {
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
  }

  .upload-dialog-content {
    .upload-tips {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
      padding: 15px;
      background-color: #f8fafc;
      border-radius: 6px;

      .tip-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #606266;

        .el-icon {
          font-size: 16px;
        }

        &:nth-child(1) .el-icon {
          color: #67C23A;
        }

        &:nth-child(2) .el-icon {
          color: #409EFF;
        }

        &:nth-child(3),
        &:nth-child(4) .el-icon {
          color: #E6A23C;
        }
      }
    }

    .photo-uploader {
      :deep(.el-upload) {
        width: 100%;
        height: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        transition: border-color 0.3s;
        background-color: #fafafa;

        &:hover {
          border-color: #409EFF;
          background-color: #f0f7ff;
        }

        .el-icon {
          font-size: 32px;
          color: #8c939d;
          margin-bottom: 10px;
        }

        .upload-text {
          font-size: 14px;
          color: #8c939d;
        }
      }

      :deep(.el-upload-list__item) {
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
        }
      }
    }

    .file-uploader {
      :deep(.el-upload-dragger) {
        padding: 40px 20px;
        border-radius: 6px;
        background-color: #fafafa;
        transition: all 0.3s;

        &:hover {
          border-color: #409EFF;
          background-color: #f0f7ff;
        }

        .el-icon--upload {
          font-size: 48px;
          color: #8c939d;
          margin-bottom: 15px;
        }

        .el-upload__text {
          font-size: 14px;
          color: #606266;

          em {
            color: #409EFF;
            font-style: normal;
          }
        }
      }

      .el-upload__tip {
        margin-top: 15px;
        font-size: 13px;
        color: #909399;
        text-align: center;
      }
    }
  }
}

.confirm-dialog {
  border-radius: 8px;

  .confirm-content {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 0;

    .warning-icon {
      font-size: 24px;
      color: #E6A23C;
    }
  }

  :deep(.el-dialog__footer) {
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
  }
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;

  .el-icon {
    font-size: 40px;
    margin-bottom: 10px;
  }

  span {
    font-size: 14px;
  }
}

@media (max-width: 992px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 768px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }

  .school-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px !important;
  }

  .school-meta {
    flex-direction: column;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  .top-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;

    .button-container {
      width: 100%;

      .back-btn {
        width: 100%;
      }
    }
  }
}
</style>